<template>
<div class="com-right-bar pr fc">
  <div class="corner lt"></div>
  <div class="corner rt"></div>
  <div class="corner rb"></div>
  <div class="corner lb"></div>
  <div class="title fajc">{{label}}</div>
  <div class="f1 mt-64">
    <div v-for="(item, index) in chartData" :key="item.name" class="item">
      <div class="label fr ac mb-10">
        <div class="num">NO.{{index + 1}}</div>
        <div>{{item.name}}</div>
      </div>
      <div class="fr ac">
        <div class="f1 fr ac">
          <div class="bar" :style="{ width: `${item.count}%` }"></div>
        </div>
        <div class="count fr ac">{{item.count}}</div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'com-right-bar',
  props: ['chartData', 'label'],
  data () {
    return {
      max: 100
    }
  }
}
</script>

<style lang="less">
.com-right-bar {background-color: rgba(16, 38, 38, 0.7);grid-row-start: span 3;
  .corner {position: absolute;width: 20px;height: 20px;border: 2px solid #1AFFF8;
    &.lt {border-right: 0;border-bottom: 0;left: 0;top: 0;}
    &.rt {border-left: 0;border-bottom: 0;right: 0;top: 0;}
    &.rb {border-left: 0;border-top: 0;right: 0;bottom: 0;}
    &.lb {border-right: 0;border-top: 0;left: 0;bottom: 0;}
  }
  .title {width: 100%;height: 108px;padding-bottom: 2px;font: 500 40px PingFangSC-Medium;color: #FFFFFF;background: url("../../../../assets/imgCity/header_bottom_line.png") center bottom/534px 2px no-repeat;}
  .mt-64 {margin-top: 64px;}
  .item {padding-left: 32px;
    .label {font: 500 28px PingFangSC-Medium;line-height: 28px;color: #FFFFFF;
      .num {width: 90px;}
    }
    .bar {height: 20px;background-color: #0CFFFE;}
    .count {width: 90px;height: 26px;margin-left: 60px;font: 500 32px PingFangSC-Medium;color: #0CFFFE;}
    + .item {margin-top: 32px;}
  }
}
</style>
